<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          *{
            margin: 0;
            padding: 0;
        }

        html,body{
            width: 100%;
            height: 100%;
            background-color: #ccc;
        }
        div{
            text-align: center;
            padding-top: 200px;
            font-size: 60px;
            font-weight: 800;
            text-shadow: 1px 1px 0 #000,-1px -1px 0 #fff;
            color: #ccc;
        }
    </style>
</head>
<body>
    <div id ="box">
        <p>距离午休还有</p>
        <span id="day"></span>天
        <span id="hours"></span>时
        <span id="minutes"></span>分
        <span id="seconds"></span>秒
    </div>


    <script>
        // 作业：定义一个生成随机颜色的函数
        // 定义一个函数返回时间差
        // let day = document.querySelector("#day");//获取元素节点
        // console.log(day);
        // day.innerText = 111;//day.innerText：向元素内添加内容
        // 元素.style.color = xxxx;
        function diffTime(curr,tar){
            let diffMs = Math.ceil((tar.getTime()-curr.getTime()))/1000;
            return{
                day:Math.floor(diffMs/(60 * 60 *24)),
                hours:Math.floor(diffMs%(60 *60 *24)/(60 * 60)),
                minutes:Math.floor(diffMs % (60 * 60)/60),
                seconds:Math.floor(diffMs % 60)
            }
        }
        // 范围内的随机整数
        function randomNum(a,b){
            let max = Math.max(a,b);
            let min = Math.min(a,b);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        // 随机颜色 rgb格式
        function randomColor(){
            let arr = [];
            for(let i = 0; i < 3; i++){
                arr.push(randomNum(0,255));
            }
            return 'rgb(' + arr.join() + ')'
        }
        //确定目标时间
        let target = new Date(2022,9,29,12,00);

        setInterval(function(){
            //获取现在的时间
            let current = new Date()
            let diff = diffTime(current,target);
            document.body.style.backgroundColor = randomColor()
            box.style.color = randomColor()
            day.innerText = diff.day
            hours.innerText = diff.hours
            minutes.innerText = diff.minutes
            seconds.innerText = diff.seconds
        },1000)
    </script>
</body>
</html>